<!--
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2025-01-05 22:24:39
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2025-02-19 15:58:39
 * @FilePath: \project-my\vue-mall\src\views\action\index.vue
 * @Description: 
-->
<template>
    <div>
        <div class="mb-4">
            <el-button @click="counter.increment">Default</el-button>
            <el-button type="primary" @click="getImageList(111)">getList Primary</el-button>
            <el-button type="success">Success</el-button>
            <el-button type="info" @click="changeText">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
            <el-button>Text {{ counter.count }}---{{ counter.doubleCount }}</el-button>
        </div>
        <h2>更改store的方式</h2>
        <div>---{{ actionData.text }}</div>
        <myImage>aaaaaaa</myImage>
        <SkuSelector :skuOptions="skuData" />
    </div>
</template>

<script lang="ts" setup>
import { useCounterStore } from '@/store/counter'
import { useActionData } from '@/store/actionData'
import { onMounted, onBeforeMount } from 'vue'
import SkuSelector from '@/components/SkuSelector.vue'

const counter = useCounterStore()
const actionData = useActionData()

const skuData = [
    {
        name: '颜色',
        items: [
            { label: '红色', value: 'red' },
            { label: '蓝色', value: 'blue' },
            { label: '黄色', value: 'yellow' }
        ]
    },
    {
        name: '尺寸',
        items: [
            { label: 'S', value: 's' },
            { label: 'M', value: 'm' }
        ]
    },
    {
        name: '材质',
        items: [
            { label: '棉', value: 'cotton' },
            { label: '聚酯', value: 'polyester' }
        ]
    }
]

onBeforeMount(() => {
    console.log('onBeforeMount')
    counter.getList()
})

onMounted(() => {
    setTimeout(() => {
        console.log('setTimeout')
        console.log('get--counter', counter.list)
    }, 1000)

})
const getImageList = (params: number) => {
    console.log('%c [ params ]-43', 'font-size:13px; background:pink; color:#bf2c9f;', params)
    counter.getList()
    // ①直接修改
    actionData.text = '我是直接通过修改store后的text'
}
const changeText = () => {

    // ②通过action 修改 store里面的值
    // actionData.setText('dddd')
    actionData.$patch({
        text: '我是pacth修改后的text'
    })
}
</script>

<style lang="scss" scoped></style>